<template>
	<div>
		<div class="placeOrder" v-show="!loading && !loadingException">
			<van-cell-group v-if="addressInfo.id != 0" style="box-shadow:0px 2px 10px 4px #eaeaea;" @click.native="$router.push({name: 'orderchoiceAddress', query: {id: $route.query.id}})">
				<van-cell :title="'收货人：' + addressInfo.deliveryPerson" :value="addressInfo.deliveryPhone" :border="false" class="Contacts" />
				<van-cell :value="'收货地址：' + normalizeReceivingAddress" border icon="location" is-link style="padding-top: 0px;" />
			</van-cell-group>
			<van-cell-group v-else style="box-shadow:0px 2px 10px 4px #eaeaea;" @click.native="$router.push({name: 'orderchoiceAddress', query: {id: $route.query.id}})">
				<van-cell value="暂无地址" :border="false" is-link class="Contacts" style="padding: 20px;"  />
			</van-cell-group>
			
			<div class="" style="font-size: 0;">
				<img src="~assets/img/order/placeOrder_line.jpg" width="100%" />
			</div>
			<van-row>
				<list-item v-for="item in orderGoodsList" :key="item.cart_id" :name="item.cart_id" :price="item.subtotal_price" :imgArea="[90, 90]" :imgUrl="item.spic" :title="item.model" :desc="item.title"  :number="item.goods_quantity" />
			</van-row>
			<van-submit-bar class="cart-submit van-hairline--top" :price="orderInfo.orderAmount * 100" :loading="submitLoading" :button-text="submitBarText" @submit="" @click.native="handleShowOrderPay"></van-submit-bar>
			
			<van-row class="total">
				<van-panel title="商品合计" :status="orderInfo.goodsAmount | formatPrice | padPrefix('￥')"  class="total_panel"></van-panel>
				<van-panel title="运费" :status="orderInfo.expressFee | formatPrice | padPrefix('+￥')" class="total_pane2"></van-panel>
			</van-row>
			<PayItem 
				:payShow = "orderPayShowModel"
				:total = "orderInfo.orderAmount"
				@pay = "handleOrderPaySubmit"
				@getRadio = "handleChangeOrderPayType"
				@hidePay = "handleHideOrderPay"
			/>
		</div>
		<van-toast :mask="true" message="加载中..." type="loading" v-model="loading"></van-toast>
		<errorTips error-message="请求异常" v-show="loadingException"></errorTips>
	</div>
</template>

<script>
	import { mapGetters, mapActions, mapState } from 'vuex'
	import ListItem from '@/components/list-item'
	import PayItem from '@/components/pay-item'
	import ErrorTips from '@/components/error-tips'
	import { cartOrderInfo } from '@/api/cart/index'
	import { payOrder , getOrderID ,getZfbUrl} from '@/api/pay/index'

	export default {
		name: 'Cart',
		components: {
			ListItem,
			PayItem,
			ErrorTips,	
		},
		data () {
			return {
				loading: true,
				submitLoading: false,
				loadingException: false,
				orderInfo: {
					goodsAmount: 0.00,
					orderAmount: 0.00,
					expressFee: 0.00,
				},
				orderGoodsList: [],
				memberInfo: {
					mobile: '',
					wallet: 0.00,
				},
				addressInfo: {
					id: 0,
					provinceName: '',
					cityName: '',
					sectionName: '',
					streetName: '',
					deliveryAddress: '',
				},
				addressId: 0,
				orderPayType: 1,
				submitBarText: '提交订单',
				
				order_id: '',
				orderPayShowModel: false,
				addressStatus: 0
			}
		},
		computed: {
			normalizeReceivingAddress () {
				return this.addressInfo.provinceName + this.addressInfo.cityName + this.addressInfo.sectionName + this.addressInfo.streetName + this.addressInfo.deliveryAddress
			},
			...mapGetters(['contactMobile', 'walletBalance', 'orderPayTypeDefault', 'orderPayTypeList']),
		},
		created () {

		},
		activated () {
			this.addressId = this.$route.query.addressId
	    	this.getCartOrderInfo()
	    	this.getMemberInfo()
		},
		methods: {
			...mapActions(['getMemberInfo']),
			getCartOrderInfo () {
				this.loading = true
				cartOrderInfo(this.$route.query.id, this.addressId).then((res) => {
					this.loading = false
					if (res.status == 0) {
					this.addressStatus = res.data.address_status
//					if(this.addressStatus){
						this.addressInfo = res.data.addressInfo
						this.orderGoodsList = res.data.goodsList;
						this.memberInfo.mobile = res.data.memberInfo.mobile
						this.memberInfo.wallet = res.data.memberInfo.wallet
						this.orderInfo.goodsAmount = res.data.orderInfo.goodsAmount
						this.orderInfo.orderAmount = res.data.orderInfo.orderAmount
						this.orderInfo.expressFee = res.data.orderInfo.expressFee
//					}
					} else {
						this.loadingException = true
					}
					
				}).catch((rps) => {
//					this.addressStatus = 0
//					this.$toast(rps)
					this.loading = false
					this.addressInfo = {}
					this.orderGoodsList = []
					this.memberInfo.mobile = ''
					this.memberInfo.wallet = 0.00
					this.orderInfo.orderAmount = 0.00
					this.orderInfo.orderAmount = 0.00
					this.orderInfo.expressFee = 0.00
				})
			},
			formatPrice (price) {
				return(price / 100).toFixed(2)
			},
			handleShowOrderPay () {
				this.submitLoading = true
				getOrderID(this.addressInfo.id, this.$route.query.id).then((res)=>{
					this.submitLoading = false
					if (res.status == 0) {
						this.orderPayShowModel = true
						this.order_id = res.data.order_id;
					} else {
						this.$toast(rst.message ? rst.message : '请求失败')
					}
				}).catch((error) => {
					this.submitLoading = false
					this.orderPayShowModel = false
					this.$toast('提交失败')
           	 	})
			},
			handleHideOrderPay() {
				this.orderPayShowModel = false
				this.$router.push({name:'orderList'})
			},
			handleOrderPaySubmit () {
				if (this.orderPayType == 2) {
					if (this.order_id != '') {
						this.$router.push({name: 'orderMemberValidate', query: {id: this.order_id}});
					} else {
					  	this.$toast('提交失败,商品ID不存在')
					}
				} else {
					payOrder(this.orderPayType, this.order_id).then((res)=>{
						if (res.status == '1') {
							this.$toast(res.message)
						}
						if (res.data.ali_link != '') {
							window.location.href = res.data.ali_link;
						}
					}).catch(() => {
						
            		})
				}
				
			},
			handleChangeOrderPayType (orderPayType) {
				this.orderPayType = orderPayType+1
			}
		},
	}
</script>

<style lang="scss">
	@import "../../styles/color.scss";
	
	.placeOrder {
		padding-top: 50px;
		/*padding-bottom: 50px;*/
		.van-contact-card {
			background-color: transparent;
		}
		.row .card-desc{
			color: $ashColor;
		}
		.van-submit-bar {
			bottom: 0
		}
		.row .card-title {
			line-height: 24px;
			height: 24px;
		}
		.cart-top {
			height: 38px;
			line-height: 38px;
			padding: 0 10px;
			.van-checkbox {
				float: left;
				vertical-align: middle
			}
			&>span {
				float: right;
				text-align: right;
				padding-right: 5px;
				.van-icon {
					vertical-align: middle;
					color: #aaa;
					font-size: 20px;
				}
			}
		}
		.cart-goods {
			padding-bottom: 62px;
			.cart-goods-item {
				position: relative;
				.van-checkbox__icon {
					display: none;
				}
				.van-checkbox__label {
					width: 100%;
					padding: 0 15px;
					padding-top: 10px;
					margin-left: 0;
					box-sizing: border-box;
					&> .van-row {
						margin: 3px;
						box-shadow: 0px 2px 3px 2px #f5f5f5;
					}
				}
			}
		}
		.cart-submit {
			.van-checkbox {
				margin-left: 10px;
			}
		}
		.van-stepper__minus,
		.van-stepper__plus,
		.van-stepper__minus--disabled,
		.van-stepper__plus--disabled {
			border: none;
			background-color: #fff;
		}
		.van-stepper__input {
			border: none;
			font-weight: bold;
			background-color: #f5f5f5;
		}
		.van-contact-card__content {
			text-align: left;
			background-color: #fff;
			margin: 15px;
		}
		.row {
			margin: 15px;
			margin-bottom: 0;
			box-shadow:0px 2px 10px 4px #eaeaea;
		}
		.van-contact-card::after {
			content: '';
			display: block;
			height: 6px;
			background: -webkit-repeating-linear-gradient(135deg, #f68e8f 0, #f68e8f 20%, #fff 0, #fff 25%, #90c9f6 0, #90c9f6 45%, #fff 0, #fff 50%);
			background: repeating-linear-gradient(-45deg, #f68e8f 0, #f68e8f 20%, #fff 0, #fff 25%, #90c9f6 0, #90c9f6 45%, #fff 0, #fff 50%);
			background-size: 180px;
		}
		.van-contact-card--edit .van-contact-card__icon {
			vertical-align: bottom;
		}
		.van-card {
			margin: 15px;
			background-color: #FFFFFF;
			padding: 15px;
			height: auto;
			margin-top: 0;
		}
		.van-card__thumb {
			/*height: auto;*/
		}
		.van-card__thumb img {
			display: none;
		}
		.van-cell__left-icon,
		.van-cell__right-icon {
			/*top: 10px;*/
		}
		.van-cell-group {
			margin: 15px;
		}
		.Contacts {
			padding-bottom: 5px;
			.van-cell__title {
				padding-left: 21px;
				font-size: 16px;
			}
			.van-cell__value {
				font-size: 16px;
				/*font-weight: 700;*/
			}
		}
		.van-cell__value--alone {
			font-size: 12px;
			/*line-height: 16px;*/
			word-wrap: break-word;
    		word-break: break-all;
		}
		.card-footer-price{
			span{
				color: $titleColor;
			}
		}
		.total{
			box-shadow:0px 2px 10px 4px #eaeaea;
			margin:15px;
			.van-cell-group{
				margin: 0;
			}
			margin-bottom:15px;
			.van-hairline--top-bottom::after,.van-cell:not(:last-child)::after{
				border: none;
			}
			.total_panel{
				font-size: 0.28rem;
				.van-cell{
					padding-bottom: 0;
					.van-cell__value{
						color: $titleColor;
					}
				}
			}
			.total_pane2{
				font-size: 0.28rem;
				.van-cell{
					padding-top: 0;
					.van-cell__value{
						color: $titleColor;
					}
				}
			}
		}
	}
		@media screen and (max-width: 360px) {
			.placeOrder .Contacts .van-cell__title,.placeOrder .Contacts .van-cell__value{
				font-size: 14px;
			}
			.placeOrder .van-popup .van-cell__value{
				flex: 2;
			}
			.placeOrder .van-popup .van-cell__title{
				flex: 17;
			}
			.placeOrder .van-popup .van-cell__title img{
				margin-right: 0px;
			}
			.placeOrder .van-popup .van-cell__title .van-cell-text{
				display: inline-block;
			}
		}
</style>